<template>
	<!-- 新增地址 -->
	<view class="NewAddress public">
		<view class="main">
			<view class="mian-item">
				<view class="notes">
					收货人
				</view>
				<view class="inputBox flexjcsb">
					<input type="text" placeholder="请填写姓名" v-model="consignee" @blur="getname">
					<!-- <text :class="regular.name == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.name}}</text> -->
					<uni-icons :type="regular.name"></uni-icons>
				</view>
			</view>
			<view class="mian-item">
				<view class="notes">

				</view>
				<view class="inputBox">
					<radio-group v-model="sex" @change="sexs">
						<label class="radio">
							<radio value="1" :checked="sex == 1" /><text>先生</text>
						</label>
						<label class="radio nv">
							<radio value="2" :checked="sex == 2" /><text>女士</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="mian-item">
				<view class="notes">
					手机号
				</view>
				<view class="inputBox flexjcsb">
					<input type="number" placeholder="请填写收货人手机号" maxlength="11" v-model="phone" @blur="getphone">
					<!-- <text :class="regular.phone == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.phone}}</text> -->
					<uni-icons :type="regular.phone"></uni-icons>
				</view>
			</view>
			<view class="mian-item">
				<view class="notes">
					收货地址
				</view>
				<view class="inputBox">
					<input type="text" v-model="xuanaddress" placeholder="输入后请选择下方显示的地址" 
					@input="toSearchAddress">
					 <ul class="text_box" v-if="xuanaddress != ''">
					     <li @click="dizhi(item)" v-for="(item,index) in tips" :key="item.id" style="font-size: 28rpx;padding: 10rpx 0rpx;">
							{{ item.name }}
						</li>
					 </ul>
					<!-- <picker mode="region" v-model="xuanaddress" :value="select" :range="select"
						@change="bindDateChange">
						<view class="uni-input" v-if="activeCitys">请选择收货地址</view>
						<view class="activeAddredd" v-else>
							<text>{{activeCity[0]}}</text>
							<text>{{activeCity[1]}}</text>
							<text>{{activeCity[2]}}</text>
						</view>
					</picker> -->
				</view>
			</view>
			<view class="mian-item">
				<view class="notes">
					门牌号
				</view>
				<view class="inputBox">
					<input type="text" placeholder="例: 9号楼302室" v-model="house">
				</view>
			</view>
		</view>
		 <!-- v-if="status == 1" -->
		<view class="footer">
			<view class="footer-left">
				<view class="footer-left-title">
					设为默认地址
				</view>
				<view class="footer-left-footer">
					提醒：下单会优先使用该地址
				</view>
			</view>
			<view class="footer-right">
				<switch v-model="switchStatus" @change="getswitchStatus" color="#f14500" style="transform:scale(0.7)" />
			</view>
		</view>
		<view class="buttonBox">
			<button @click="edit" v-if="status == 1">确认编辑</button>
			<button @click="save" v-else>保存</button>
		</view>
	</view>
</template>

<script>
	import city from '../../../public/city.js'
	const $api = require('@/utils/request.js').API
	import amapFile from '@/utils/amap-wx.130.js';
	export default {
		data() {
			return {
				type: 'center',
				// array: ['中国', '美国', '巴西', '日本'],
				consignee: '', // 收货人
				sex: '', // 性别
				phone: '', // 手机号
				house: '', // 门牌号
				titleStatus: '', // 标题状态
				select: city,
				activeCity: [], // 选择地址
				activeCitys: true,
				xuanaddress:null,
				switchStatus: false, // 默认地址
				// index: [0,0,0],
				editData: [],
				status: '',
				regular: {
					name: '',
					phone: ''
				},
				myAmapFun:null,
				tips:[],
				longitude:null, //经度
				latitude:null, //纬度
			}
		},
		watch: {
			house() {
				this.tips = []
			},
		},
		onLoad(options) {
			this.status = options.status
			if (options.status == 1) {
				this.editData = JSON.parse(options.item)
				uni.setNavigationBarTitle({
					title: '修改地址'
				})
				this.consignee = this.editData.name
				this.sex = this.editData.gender
				this.phone = this.editData.mobile
				this.house = this.editData.house_number
			    this.xuanaddress = this.editData.address
				this.activeCity.push(this.editData.address)
				this.activeCitys = false
				this.switchStatus = this.editData.is_default == 1 ? true : false
				this.latitude = this.editData.latitude
				this.longitude = this.editData.longitude 
			} else {
				uni.setNavigationBarTitle({
					title: '新增地址'
				})
			}
			this.myAmapFun = new amapFile.AMapWX({
				key: 'e5cab9eaf8da6f8be8a49b897122444e' // 高德key
			});
		},
		onShow() {

		},
		methods: {
			// 保存
			save() {
				if(!this.latitude || !this.longitude){
					uni.showToast({
						title: '请选择您的收货地址',
						icon: 'none',
						duration: 2000
					})
					return 
				}
				if (!this.consignee || !this.sex || !this.phone || !this.house) {
					uni.showToast({
						title: '输入框里面的内容不能为空',
						icon: 'none',
						duration: 2000
					})
				} else {
					// let activeCity = this.activeCity.toString()
					let obj = {
						// token: uni.getStorageSync('token'),
						name: this.consignee, // 姓名
						gender: this.sex, // 性别
						mobile: this.phone, // 手机号
						address: this.xuanaddress, // 选择地址
						house_number: this.house, // 门牌号
						latitude:this.latitude,
						longitude:this.longitude,
						// is_default: this.switchStatus == true ? 1 : 0,	// 默认地址
						// is_default: this.setUpDefault(this.switchStatus == true)
					}
					$api.postAddress(obj).then(res => {
						if (res.data.code == 0) {
							this.setUpDefault(this.switchStatus == true ? 1 : 0)
							uni.navigateBack({
								delta: 1,
							})
						}
					})
				}
			},
			// 编辑地址
			edit() {
				let obj = {
					id: this.editData.id,
					token: uni.getStorageSync('token'),
					name: this.consignee, // 姓名
					gender: this.sex, // 性别
					mobile: this.phone, // 手机号
					activeCity: this.xuanaddress, // 选择地址
					address: this.xuanaddress, // 选择地址
					house_number: this.house, // 门牌号
					is_default: this.switchStatus == true ? 1 : 0, // 默认地址
					latitude:this.latitude,
					longitude:this.longitude,
				}
				$api.postAddressEdit(obj).then(res => {
					this.setUpDefault(this.editData.id)
					uni.showToast({
						title:'编辑成功',
						icon:'',
						duration:2000
					})
					setTimeout(() => {
						uni.navigateBack({
							// url:'./address'
							delta: 1
						})
					},1000)
				})
			},
			// 默认地址
			getswitchStatus(e) {
				this.switchStatus = e.detail.value
				this.setUpDefault()
			},
			setUpDefault(id) {
				$api.postSetUpDefault({
					// token: uni.getStorageSync('token'),
					id: id || this.editData.id,
				})
			},


			toggle() {
				this.$refs.popup.open('bottom')
			},
			// 单选框的值
			sexs(e) {
				this.sex = e.detail.value
			},
			bindDateChange(e) {
				// this.xuanaddress = e.detail.value
				this.activeCity = e.detail.value
				this.activeCitys = false
			},
			// 正则验证
			getname() {
				let reg = /^[\u4e00-\u9fa5]{2,8}$/
				if (reg.exec(this.consignee)) {
					this.regular.name = 'checkmarkempty';
				} else {
					this.regular.name = 'closeempty';
				}
			},
			getphone(){
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (reg.exec(this.phone)) {
				  this.regular.phone = 'checkmarkempty';
				} else {
				  this.regular.phone = 'closeempty';
				}
			},
			toSearchAddress(e){
				var that = this;
				this.xuanaddress = e.detail.value;
				if(e.detail.value){
					this.myAmapFun.getInputtips({
					  keywords: e.detail.value,
					  location: '',
					  success: function(data){
						if(data && data.tips){
							 that.tips = data.tips;
						}
					
					  }
					})
				}
				
			},
			dizhi(obj){
				if(obj){
					this.xuanaddress = obj.district+obj.address+obj.name;
					this.tips=[];
					if(obj.location){
						this.longitude= obj.location.split(",")[0];
						this.latitude= obj.location.split(",")[1];
					}
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.NewAddress {
		position: relative;
		// width: 100%;
		// height: 93vh;
		background: #F3F3F3;
		border-top: 1px solid #F3F3F3;

		.regularAnswer {
			color: #19be6b;
		}

		.regularWrong {
			color: #fa3534;
		}

		.main {
			width: 702rpx;
			margin: auto;
			margin-top: 20rpx;
			background: white;
			box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(10, 13, 47, 0.05);
			border-radius: 10rpx;

			// 每一条数据
			.mian-item {
				display: flex;
				// justify-content: space-between;
				margin: 0 44rpx 0 41rpx;
				padding: 30rpx 0;
				border-bottom: 1px solid #E6E6E6;

				// 前面的格式
				.notes {
					width: 190rpx;
				}

				// 后面的input框
				.inputBox {
					position: relative;
					width: 100%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					// color: #999999;
					line-height: 30rpx;

					radio-group {
						.radio:last-child {
							margin-left: 49rpx;
						}
					}

					text {
						padding-left: 20rpx;
					}

					.activeAddredd {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
					}
				}
			}

			.main-item:last-child {
				border-bottom: 0;
			}
		}

		// 默认地址
		.footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 702rpx;
			height: 129rpx;
			margin: auto;
			margin-top: 20rpx;
			background: white;
			border-radius: 10rpx;
			box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(10, 13, 47, 0.05);

			.footer-left {
				padding-left: 41rpx;

				// 设为默认地址
				.footer-left-title {
					// width: 178rpx;
					// height: 28rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #525151;
					line-height: 30rpx;
				}

				// 设为默认地址的提示
				.footer-left-footer {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #8B8B8B;
					line-height: 30rpx;
					padding-top: 21rpx;
				}
			}

			// 开关按钮
			.footer-right {
				padding-right: 36rpx;
			}
		}

		.buttonBox {
			position: absolute;
			width: 630rpx;
			height: 88rpx;
			left: 60rpx;
			bottom: 0;
			margin: auto;

			button {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: #F14500;
				border-radius: 44rpx;
			}
		}
	}
	.text_box{
		list-style: none;
		li{
			border-bottom: 1px solid #E6E6E6;
		}
	}
    
</style>